<template>
  <div class="certificate-management">
    <!-- 顶部基础信息 -->
    <div class="page-header">
      <span class="info-item">培训班编号：{{ classCode || '-' }}</span>
      <span class="info-item">培训班名称：{{ className || '-' }}</span>
    </div>

    <!-- 搜索筛选区域 -->
    <div class="search-container" v-if="searchVisible">
      <div class="search-row">
        <el-input
          v-model="searchForm.name"
          placeholder="姓名"
          class="search-item"
          clearable
        ></el-input>
        <el-input
          v-model="searchForm.phone"
          placeholder="手机号码"
          class="search-item"
          clearable
        ></el-input>
        <el-input
          v-model="searchForm.idCard"
          placeholder="证件编号"
          class="search-item"
          clearable
        ></el-input>
        <el-input
          v-model="searchForm.certNo"
          placeholder="证书编号"
          class="search-item"
          clearable
        ></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </div>

      <div class="search-row">
        <el-select
          v-model="searchForm.electronicStatus"
          placeholder="选择电子证书状态"
          class="search-item"
          clearable
        >
          <el-option
            v-for="item in electronicStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-select
          v-model="searchForm.paperStatus"
          placeholder="选择纸质证书状态"
          class="search-item"
          clearable
        >
          <el-option
            v-for="item in paperStatusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
        <el-input
          v-model="searchForm.remark"
          placeholder="备注"
          class="search-item"
          clearable
        ></el-input>
        <el-select
          v-model="searchForm.expireSoon"
          placeholder="选择临近过期期限"
          class="search-item"
          clearable
        >
          <el-option
            v-for="item in expireOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div class="search-row">
        <el-select
          v-model="searchForm.paperReceiveType"
          placeholder="选择纸质证书领取方式"
          class="search-item"
          clearable
        >
          <el-option label="现场领取" value="onSite"></el-option>
          <el-option label="快递发放" value="express"></el-option>
        </el-select>
      </div>
    </div>

    <!-- 操作按钮区域 -->
    <div class="operation-buttons">
      <div class="button-group">
        <span class="group-label">管理列表</span>
        <el-button @click="handleExport">导出</el-button>
        <el-button @click="handleRemark">备注</el-button>
        <el-button @click="handleNotifyStudents">通知学员</el-button>
      </div>

      <div class="button-group">
        <span class="group-label">电子证书</span>
        <el-button @click="handleGenerateElectronic">生成电子证书</el-button>
        <el-button @click="handleRevokeElectronic">撤销电子证书</el-button>
        <el-button @click="handleViewElectronic">查看电子证书</el-button>
        <el-button @click="handleDownloadElectronic">下载电子证书</el-button>
        <el-button @click="handleSendElectronic">发送电子证书</el-button>
      </div>

      <div class="button-group">
        <span class="group-label">纸质证书</span>
        <el-button @click="handleExpressDelivery">快递发放证书</el-button>
        <el-button @click="handleOnSiteReceive">现场领取证书</el-button>
      </div>

      <div class="button-group">
        <span class="group-label">复训换证</span>
        <el-button @click="handleRenewal">复训换证</el-button>
        <el-button @click="handleApplyRenewal">报名复训换证</el-button>
      </div>

      <div class="button-auxiliary">
        <el-button type="text" @click="toggleSearch">{{ searchVisible ? '隐藏搜索' : '显示搜索' }}</el-button>
        <el-button type="text" @click="handleRefresh">刷新</el-button>
        <el-button type="text" @click="toggleSort">隐藏/排序</el-button>
      </div>
    </div>

    <!-- 证书列表表格 -->
    <el-table
      :data="certificateList"
      border
      style="width: 100%; margin-top: 15px;"
      @selection-change="handleSelectionChange"
      :loading="tableLoading"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="certType" label="证书类型" width="100"></el-table-column>
      <el-table-column prop="electronicStatus" label="电子证书状态" width="120">
        <template #default="scope">
          <span :class="getStatusClass(scope.row.electronicStatus)">{{ scope.row.electronicStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="paperStatus" label="纸质证书状态" width="120">
        <template #default="scope">
          <span :class="getStatusClass(scope.row.paperStatus)">{{ scope.row.paperStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="certNo" label="证书编号" width="180"></el-table-column>
      <el-table-column prop="serialNo" label="编号" width="100"></el-table-column>
      <el-table-column prop="name" label="姓名" width="100"></el-table-column>
      <el-table-column prop="idCard" label="证件编号" width="180"></el-table-column>
      <el-table-column prop="gender" label="性别" width="80"></el-table-column>
      <el-table-column prop="phone" label="电话" width="120"></el-table-column>
      <el-table-column prop="company" label="单位名称" min-width="150"></el-table-column>
      <el-table-column prop="trainingProject" label="培训项目" min-width="150"></el-table-column>
      <el-table-column prop="issueTime" label="证书发放时间" width="160"></el-table-column>
      <el-table-column prop="expireTime" label="证书有效期至" width="160"></el-table-column>
      <el-table-column prop="paperApplyTime" label="纸质证书申请时间" width="160"></el-table-column>
      <el-table-column prop="paperReceiveType" label="纸质证领取方式" width="140"></el-table-column>
      <el-table-column prop="expressNo" label="快递单号" width="140"></el-table-column>
      <el-table-column prop="remark" label="备注" min-width="120"></el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template #default="scope">
          <el-button type="text" @click="handleRowRemark(scope.row)">备注</el-button>
          <el-button type="text" @click="handleRowNotify(scope.row)">学员通知</el-button>
          <el-button type="text" @click="handleDownload(scope.row)">下载证书</el-button>
          <el-button type="text" @click="handlePrint(scope.row)">打印证书</el-button>
          <el-button
            type="text"
            @click="handleCopyExpressNo(scope.row)"
            v-if="scope.row.expressNo"
          >
            复制单号
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div class="pagination-container">
      <div class="pagination-info">共 {{ totalCount }} 条</div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="sizes, prev, pager, next, jumper"
        :total="totalCount"
      ></el-pagination>
    </div>

    <!-- 学员通知弹窗 -->
    <el-dialog
      title="发送学员通知"
      :visible.sync="noticeDialogVisible"
      width="50%"
      :before-close="handleNoticeDialogClose"
    >
      <el-form :model="noticeForm" ref="noticeForm" :rules="noticeRules">
        <el-form-item label="通知类型" prop="sendTypes">
          <el-checkbox-group v-model="noticeForm.sendTypes">
            <el-checkbox label="0">短信</el-checkbox>
            <el-checkbox label="1">门户</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="通知内容" prop="content">
          <el-input
            type="textarea"
            v-model="noticeForm.content"
            placeholder="请输入通知内容"
            rows="6"
          ></el-input>
        </el-form-item>
        <el-form-item label="发送范围">
          <el-radio-group v-model="noticeForm.range" @change="handleRangeChange">
            <el-radio label="all">所有学员</el-radio>
            <el-radio label="selected">指定学员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="noticeForm.range === 'selected'"
          class="selected-users-form-item"
          prop="selectedUsers"
          :rules="[{ required: true, message: '请至少选择一个学员', trigger: 'change' }]"
        >
          <el-select
            v-model="noticeForm.selectedUsers"
            multiple
            placeholder="请输入学员姓名搜索并选择"
            filterable
            remote
            :remote-method="queryUsers"
            :loading="userLoading"
            style="width: 100%;"
            clearable
            @clear="handleSelectClear"
          >
            <el-option
              v-for="user in userOptions"
              :key="user.studentId"
              :label="user.studentName"
              :value="user.studentId"
            >
              <span style="float: left">{{ user.studentName }}</span>
              <!-- <span style="float: right; color: #8492a6; font-size: 13px">
                {{ user.company }}
              </span> -->
              <span style="float: right; color: #8492a6; font-size: 13px">
                {{ user.idNumber || '无证件号' }}
              </span>
            </el-option>
          </el-select>
          <div class="selected-count" v-if="noticeForm.range === 'selected'">
            已选择 {{ noticeForm.selectedUsers.length }} 名学员
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="noticeDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitNotice" :loading="noticeLoading">发送</el-button>
      </div>
    </el-dialog>

    <!-- 备注弹窗 -->
    <el-dialog
      title="添加备注"
      :visible.sync="remarkDialogVisible"
      width="40%"
    >
      <el-form :model="remarkForm" ref="remarkForm" :rules="remarkRules">
        <el-form-item label="备注内容" prop="remark">
          <el-input
            type="textarea"
            v-model="remarkForm.remark"
            placeholder="请输入备注内容"
            rows="4"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="remarkDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRemark">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 生成随机日期的工具函数
const randomDate = (start, end) => {
  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
};

// 格式化日期为yyyy-mm-dd
const formatDate = (date) => {
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};

export default {
  name: 'CertificateManagementPage',
  data() {
    return {
      // 页面基础信息（模拟数据）
      classCode: 'TR20230615001',
      className: '2023年度安全生产管理人员培训',
      classId: 'class_123456',

      // 搜索表单
      searchForm: {
        name: '',
        phone: '',
        idCard: '',
        certNo: '',
        electronicStatus: '',
        paperStatus: '',
        remark: '',
        expireSoon: '',
        paperReceiveType: ''
      },
      searchVisible: true, // 搜索区域是否显示

      // 状态选项
      electronicStatusOptions: [
        { label: '已生成', value: '已生成' },
        { label: '已撤销', value: '已撤销' },
        { label: '未生成', value: '未生成' }
      ],
      paperStatusOptions: [
        { label: '已发放', value: '已发放' },
        { label: '未申请', value: '未申请' },
        { label: '已申请', value: '已申请' }
      ],
      expireOptions: [
        { label: '30天内', value: '30' },
        { label: '60天内', value: '60' },
        { label: '90天内', value: '90' }
      ],

      // 表格数据（模拟假数据）
      certificateList: [],
      totalCount: 56, // 总条数
      tableLoading: false,
      selectedRows: [],

      // 分页参数
      pagination: {
        pageNum: 1,
        pageSize: 10
      },

      // 学员通知相关
      noticeDialogVisible: false,
      noticeLoading: false,
      noticeForm: {
        content: '',
        range: 'all',
        selectedUsers: [],
        sendTypes: []
      },
      noticeRules: {
        sendTypes: [
          { required: true, message: '请选择通知类型', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请输入通知内容', trigger: 'blur' },
          { max: 500, message: '内容不能超过500个字符', trigger: 'blur' }
        ]
      },

      // 用户选择相关（模拟学员数据）
      userOptions: [],
      allUsers: [],
      userLoading: false,

      // 备注相关
      remarkDialogVisible: false,
      remarkForm: {
        remark: '',
        certId: ''
      },
      remarkRules: {
        remark: [
          { required: true, message: '请输入备注内容', trigger: 'blur' },
          { max: 200, message: '备注不能超过200个字符', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    // 生成模拟数据
    this.generateMockCertificateData();
    this.generateMockUserData();
  },
  methods: {
    // 生成模拟证书数据
    generateMockCertificateData() {
      const certTypes = ['安全管理证', '操作资格证', '特种设备证'];
      const electronicStatus = ['已生成', '已撤销', '未生成'];
      const paperStatus = ['已发放', '未申请', '已申请'];
      const companies = [
        '北京某某科技有限公司', '上海建筑工程集团', '广州运输服务公司',
        '深圳制造业工厂', '杭州互联网企业', '成都物流中心'
      ];
      const trainingProjects = [
        '安全生产管理', '特种设备操作', '危险化学品管理',
        '消防安全培训', '应急救援演练'
      ];
      const names = [
        '张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十',
        '钱一', '孙二', '周强', '吴敏', '郑华', '王芳', '李娜'
      ];

      // 生成56条模拟数据
      const data = [];
      for (let i = 1; i <= 56; i++) {
        // 随机生成日期（发放时间为过去1-6个月，有效期为发放后1-3年）
        const issueTime = randomDate(new Date(2023, 0, 1), new Date());
        const expireTime = new Date(issueTime);
        expireTime.setFullYear(issueTime.getFullYear() + Math.floor(Math.random() * 3) + 1);

        // 随机生成纸质申请时间（仅当纸质状态为已申请/已发放时）
        let paperApplyTime = '';
        const paperStatusVal = paperStatus[Math.floor(Math.random() * paperStatus.length)];
        if (paperStatusVal !== '未申请') {
          paperApplyTime = formatDate(randomDate(issueTime, new Date()));
        }

        // 随机生成领取方式和快递单号
        let paperReceiveType = '';
        let expressNo = '';
        if (paperStatusVal === '已发放') {
          paperReceiveType = Math.random() > 0.5 ? '现场领取' : '快递发放';
          if (paperReceiveType === '快递发放') {
            expressNo = `SF${Math.floor(Math.random() * 10000000000)}`;
          }
        }

        data.push({
          id: `cert_${i}`,
          studentId: `student_${i}`,
          certType: certTypes[Math.floor(Math.random() * certTypes.length)],
          electronicStatus: electronicStatus[Math.floor(Math.random() * electronicStatus.length)],
          paperStatus: paperStatusVal,
          certNo: `CERT${2023}${i.toString().padStart(6, '0')}`,
          serialNo: i,
          name: names[Math.floor(Math.random() * names.length)],
          idCard: `1${Math.floor(Math.random() * 100000000000000000).toString().padStart(17, '0')}`,
          gender: Math.random() > 0.5 ? '男' : '女',
          phone: `1${Math.floor(Math.random() * 900000000 + 100000000)}`,
          company: companies[Math.floor(Math.random() * companies.length)],
          trainingProject: trainingProjects[Math.floor(Math.random() * trainingProjects.length)],
          issueTime: formatDate(issueTime),
          expireTime: formatDate(expireTime),
          paperApplyTime,
          paperReceiveType,
          expressNo,
          remark: i % 5 === 0 ? `备注信息${i}：证书已核对` : ''
        });
      }

      this.certificateList = data;
    },

    // 生成模拟学员数据
    generateMockUserData() {
      const companies = [
        '北京某某科技有限公司', '上海建筑工程集团', '广州运输服务公司',
        '深圳制造业工厂', '杭州互联网企业', '成都物流中心'
      ];
      const names = [
        '张三', '李四', '王五', '赵六', '孙七', '周八', '吴九', '郑十',
        '钱一', '孙二', '周强', '吴敏', '郑华', '王芳', '李娜'
      ];

      this.allUsers = names.map((name, index) => ({
        studentId: `student_${index + 1}`,
        studentName: name,
        company: companies[Math.floor(Math.random() * companies.length)]
      }));
      this.userOptions = [...this.allUsers];
    },

    // 搜索（模拟筛选）
    handleSearch() {
      this.tableLoading = true;
      setTimeout(() => {
        // 简单模拟筛选逻辑
        const filtered = this.certificateList.filter(item => {
          if (this.searchForm.name && !item.name.includes(this.searchForm.name)) return false;
          if (this.searchForm.phone && !item.phone.includes(this.searchForm.phone)) return false;
          if (this.searchForm.idCard && !item.idCard.includes(this.searchForm.idCard)) return false;
          if (this.searchForm.certNo && !item.certNo.includes(this.searchForm.certNo)) return false;
          if (this.searchForm.electronicStatus && item.electronicStatus !== this.searchForm.electronicStatus) return false;
          if (this.searchForm.paperStatus && item.paperStatus !== this.searchForm.paperStatus) return false;
          return true;
        });
        this.totalCount = filtered.length;
        this.tableLoading = false;
      }, 500);
    },

    // 重置搜索条件
    handleReset() {
      this.searchForm = {
        name: '',
        phone: '',
        idCard: '',
        certNo: '',
        electronicStatus: '',
        paperStatus: '',
        remark: '',
        expireSoon: '',
        paperReceiveType: ''
      };
      this.handleSearch(); // 重置后重新加载
    },

    // 切换搜索区域显示/隐藏
    toggleSearch() {
      this.searchVisible = !this.searchVisible;
    },

    // 刷新列表
    handleRefresh() {
      this.tableLoading = true;
      setTimeout(() => {
        this.tableLoading = false;
        this.$message.success('刷新成功');
      }, 500);
    },

    // 切换排序/隐藏列
    toggleSort() {
      this.$message.info('排序/隐藏列功能已触发（模拟）');
    },

    // 导出数据
    handleExport() {
      this.$message.success('模拟导出成功，已生成Excel文件');
    },

    // 批量添加备注
    handleRemark() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择需要添加备注的证书');
        return;
      }
      this.remarkForm = {
        remark: '',
        certId: this.selectedRows.map(row => row.id).join(',')
      };
      this.remarkDialogVisible = true;
    },

    // 行内添加备注
    handleRowRemark(row) {
      this.remarkForm = {
        remark: row.remark || '',
        certId: row.id
      };
      this.remarkDialogVisible = true;
    },

    // 提交备注
    submitRemark() {
      this.$refs.remarkForm.validate(async (valid) => {
        if (valid) {
          // 模拟接口请求
          setTimeout(() => {
            this.$message.success('备注添加成功');
            this.remarkDialogVisible = false;
            // 更新列表中的备注
            this.certificateList = this.certificateList.map(item => {
              if (this.remarkForm.certId.includes(item.id)) {
                return { ...item, remark: this.remarkForm.remark };
              }
              return item;
            });
          }, 500);
        }
      });
    },

    // 批量通知学员
    handleNotifyStudents() {
      if (this.selectedRows.length === 0) {
        this.$message.warning('请先选择需要通知的学员');
        return;
      }
      this.noticeDialogVisible = true;
      this.noticeForm.selectedUsers = this.selectedRows.map(row => row.studentId);
    },

    // 行内通知学员
    handleRowNotify(row) {
      this.noticeDialogVisible = true;
      this.noticeForm.selectedUsers = [row.studentId];
      this.noticeForm.range = 'selected';
    },

    // 初始化通知表单
    initNoticeForm() {
      this.noticeForm = {
        content: '',
        range: 'all',
        selectedUsers: [],
        sendTypes: []
      };
    },

    // 处理发送范围变化
    handleRangeChange(newRange) {
      if (newRange === 'all') {
        this.setAllStudents();
      } else {
        this.noticeForm.selectedUsers = [];
      }
    },

    // 设置所有学员
    setAllStudents() {
      this.noticeForm.selectedUsers = this.allUsers.map(user => user.studentId);
    },

    // 查询用户
    queryUsers(query) {
      if (!query) {
        this.userOptions = [...this.allUsers];
        return;
      }
      this.userLoading = true;
      setTimeout(() => {
        this.userOptions = this.allUsers.filter(user =>
          user.studentName.includes(query)
        );
        this.userLoading = false;
      }, 300);
    },

    // 处理选择器清空
    handleSelectClear() {
      this.noticeForm.selectedUsers = [];
    },

    // 关闭通知弹窗
    handleNoticeDialogClose() {
      this.noticeDialogVisible = false;
    },

    // 提交通知
    submitNotice() {
      this.$refs.noticeForm.validate(async (valid) => {
        if (valid) {
          this.noticeLoading = true;
          // 模拟接口请求
          setTimeout(() => {
            this.$message.success("通知发送成功");
            this.noticeDialogVisible = false;
            this.noticeLoading = false;
          }, 1000);
        } else {
          this.$message.warning('请完善表单信息');
        }
      });
    },

    // 电子证书相关操作
    handleGenerateElectronic() {
      this.batchOperationCheck('生成电子证书');
    },
    handleRevokeElectronic() {
      this.batchOperationCheck('撤销电子证书');
    },
    handleViewElectronic() {
      this.batchOperationCheck('查看电子证书');
    },
    handleDownloadElectronic() {
      this.batchOperationCheck('下载电子证书');
    },
    handleSendElectronic() {
      this.batchOperationCheck('发送电子证书');
    },

    // 纸质证书相关操作
    handleExpressDelivery() {
      this.batchOperationCheck('快递发放证书');
    },
    handleOnSiteReceive() {
      this.batchOperationCheck('现场领取证书');
    },

    // 复训换证相关操作
    handleRenewal() {
      this.batchOperationCheck('复训换证');
    },
    handleApplyRenewal() {
      this.batchOperationCheck('报名复训换证');
    },

    // 行内操作
    handleDownload(row) {
      this.$message.success(`证书${row.certNo}下载成功`);
    },
    handlePrint(row) {
      this.$message.success(`证书${row.certNo}打印指令已发送`);
    },
    handleCopyExpressNo(row) {
      // 模拟复制到剪贴板
      this.$message.success(`快递单号${row.expressNo}已复制`);
    },

    // 批量操作前检查
    batchOperationCheck(operationName) {
      if (this.selectedRows.length === 0) {
        this.$message.warning(`请先选择需要${operationName}的记录`);
        return false;
      }
      this.$message.success(`已为${this.selectedRows.length}条记录执行${operationName}`);
      return true;
    },

    // 表格选择变化
    handleSelectionChange(val) {
      this.selectedRows = val;
    },

    // 分页大小变化
    handleSizeChange(size) {
      this.pagination.pageSize = size;
      this.$message.info(`已切换每页显示${size}条`);
    },

    // 页码变化
    handleCurrentChange(page) {
      this.pagination.pageNum = page;
    },

    // 获取状态样式
    getStatusClass(status) {
      switch (status) {
        case '已发放':
          return 'status-released';
        case '已撤销':
          return 'status-revoked';
        case '已生成':
          return 'status-generated';
        case '未申请':
          return 'status-unapplied';
        default:
          return '';
      }
    }
  }
};
</script>

<style scoped>
.certificate-management {
  margin: 20px;
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.info-item {
  margin-right: 25px;
  font-weight: 500;
  color: #333;
}

.search-container {
  background-color: #f5f7fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
  transition: all 0.3s;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
  align-items: center;
}

.search-item {
  width: 200px;
}

.operation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}
.operation-buttons .el-button { padding: 6px 10px; }

.button-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.group-label {
  color: #666;
  font-weight: 500;
  white-space: nowrap;
}

.button-auxiliary {
  margin-left: auto;
  display: flex;
  gap: 10px;
}

.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.pagination-info {
  color: #666;
}

/* 状态样式 */
.status-released {
  color: #67c23a; /* 已发放-绿色 */
}

.status-revoked {
  color: #f56c6c; /* 已撤销-红色 */
}

.status-generated {
  color: #409eff; /* 已生成-蓝色 */
}

.status-unapplied {
  color: #909399; /* 未申请-灰色 */
}

/* 表格样式优化 */
.el-table {
  font-size: 14px;
}

.el-table__header th {
  background-color: #f5f7fa !important;
}

/* 弹窗样式 */
.selected-users-form-item {
  margin-bottom: 10px;
}

.selected-count {
  margin-top: 8px;
  font-size: 12px;
  color: #909399;
  text-align: right;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .search-item {
    width: 160px;
  }
}

@media (max-width: 992px) {
  .operation-buttons {
    flex-direction: column;
    align-items: flex-start;
  }

  .button-auxiliary {
    margin-left: 0;
    margin-top: 10px;
  }
}

@media (max-width: 768px) {
  .search-item {
    width: 100%;
  }

  .page-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .info-item {
    margin-right: 0;
  }

  .pagination-container {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}
</style>
